import { RouteRecordRaw } from 'vue-router';
import { Layout, ParentLayout } from '@/router/constant';
import { OptionsSharp, DesktopOutline, AppsSharp } from '@vicons/ionicons5';
import {
  ExclamationCircleOutlined,
  CheckCircleOutlined,
  SettingOutlined,
  ProfileOutlined,
  TableOutlined,
  BorderOuterOutlined,
  WalletOutlined,
} from '@vicons/antd';
import { renderIcon, renderNew } from '@/utils/index';
const IFrame = () => import('@/views/iframe/index.vue');
const routeName = 'comp';

/**
 * @param name 路由名称, 必须设置,且不能重名
 * @param meta 路由元信息（路由附带扩展信息）
 * @param redirect 重定向地址, 访问这个路由时,自定进行重定向
 * @param meta.disabled 禁用整个菜单
 * @param meta.title 菜单名称
 * @param meta.icon 菜单图标
 * @param meta.keepAlive 缓存该路由
 * @param meta.sort 排序越小越排前
 *
 * */
const routes: Array<RouteRecordRaw> = [
  {
    path: '/naiveui',
    name: 'naiveui',
    redirect: '/naiveui/success',
    component: Layout,
    meta: {
      title: 'naiveui',
      icon: renderIcon(AppsSharp),
      sort: 1,
    },
    children: [
      {
        path: '/result',
        name: 'Result',
        redirect: '/result/success',
        meta: {
          title: '结果页面',
          icon: renderIcon(CheckCircleOutlined),
          sort: 4,
        },
        children: [
          {
            path: 'success',
            name: 'result-success',
            meta: {
              title: '成功页',
            },
            component: () => import('@/views/result/success.vue'),
          },
          {
            path: 'fail',
            name: 'result-fail',
            meta: {
              title: '失败页',
            },
            component: () => import('@/views/result/fail.vue'),
          },
          {
            path: 'info',
            name: 'result-info',
            meta: {
              title: '信息页',
            },
            component: () => import('@/views/result/info.vue'),
          },
        ],
      },
      {
        path: '/setting',
        name: 'Setting',
        redirect: '/setting/account',
        meta: {
          title: '设置页面',
          icon: renderIcon(SettingOutlined),
          sort: 5,
        },
        children: [
          {
            path: 'account',
            name: 'setting-account',
            meta: {
              title: '个人设置',
            },
            component: () => import('@/views/setting/account/account.vue'),
          },
          {
            path: 'system',
            name: 'setting-system',
            meta: {
              title: '系统设置',
            },
            component: () => import('@/views/setting/system/system.vue'),
          },
        ],
      },
      {
        path: '/system',
        name: 'System',
        redirect: '/system/menu',
        meta: {
          title: '系统设置',
          icon: renderIcon(OptionsSharp),
          sort: 1,
        },
        children: [
          {
            path: 'menu',
            name: 'system_menu',
            meta: {
              title: '菜单权限管理',
            },
            component: () => import('@/views/system/menu/menu.vue'),
          },
          {
            path: 'role',
            name: 'system_role',
            meta: {
              title: '角色权限管理',
            },
            component: () => import('@/views/system/role/role.vue'),
          },
        ],
      },
      {
        path: '/form',
        name: 'Form',
        redirect: '/form/basic-form',
        meta: {
          title: '表单页面',
          icon: renderIcon(ProfileOutlined),
          sort: 3,
        },
        children: [
          {
            path: 'basic-form',
            name: 'form-basic-form',
            meta: {
              title: '基础表单',
            },
            component: () => import('@/views/form/basicForm/index.vue'),
          },
          {
            path: 'step-form',
            name: 'form-step-form',
            meta: {
              title: '分步表单',
            },
            component: () => import('@/views/form/stepForm/stepForm.vue'),
          },
          {
            path: 'detail',
            name: 'form-detail',
            meta: {
              title: '表单详情',
            },
            component: () => import('@/views/form/detail/index.vue'),
          },
        ],
      },
      {
        path: '/list',
        name: 'List',
        redirect: '/list/basic-list',
        meta: {
          title: '列表页面',
          icon: renderIcon(TableOutlined),
          sort: 2,
        },
        children: [
          {
            path: 'basic-list',
            name: 'basic-list',
            meta: {
              title: '基础列表',
            },
            component: () => import('@/views/list/basicList/index.vue'),
          },
          {
            path: 'basic-info/:id?',
            name: 'basic-info',
            meta: {
              title: '基础详情',
              hidden: true,
              activeMenu: 'basic-list',
            },
            component: () => import('@/views/list/basicList/info.vue'),
          },
        ],
      },
      {
        path: '/frame',
        name: 'Frame',
        redirect: '/frame/docs',
        meta: {
          title: '外部页面',
          sort: 8,
          icon: renderIcon(DesktopOutline),
        },
        children: [
          {
            path: 'naive-admin',
            name: 'naive-admin',
            meta: {
              title: 'NaiveAdmin',
              frameSrc: 'https://www.naiveadmin.com',
            },
            component: IFrame,
          },
          {
            path: 'docs',
            name: 'frame-docs',
            meta: {
              title: '项目文档(内嵌)',
              frameSrc: 'https://jekip.github.io/docs',
            },
            component: IFrame,
          },
          {
            path: 'naive',
            name: 'frame-naive',
            meta: {
              title: 'NaiveUi(内嵌)',
              frameSrc: 'https://www.naiveui.com',
            },
            component: IFrame,
          },
        ],
      },
      {
        path: '/exception',
        name: 'Exception',
        redirect: '/exception/403',
        meta: {
          title: '异常页面',
          icon: renderIcon(ExclamationCircleOutlined),
          sort: 3,
        },
        children: [
          {
            path: '403',
            name: 'exception-403',
            meta: {
              title: '403',
            },
            component: () => import('@/views/exception/403.vue'),
          },
          {
            path: '404',
            name: 'exception-404',
            meta: {
              title: '404',
            },
            component: () => import('@/views/exception/404.vue'),
          },
          {
            path: '500',
            name: 'exception-500',
            meta: {
              title: '500',
            },
            component: () => import('@/views/exception/500.vue'),
          },
        ],
      },
      {
        path: '/directive',
        name: 'directive',
        meta: {
          sort: 9,
          isRoot: true,
          activeMenu: 'directive_index',
          icon: renderIcon(BorderOuterOutlined),
        },
        children: [
          {
            path: 'index',
            name: `directive_index`,
            meta: {
              title: '指令示例',
              activeMenu: 'directive_index',
            },
            component: () => import('@/views/directive/index.vue'),
          },
        ],
      },
      {
        path: '/comp',
        name: routeName,
        redirect: '/comp/table',
        meta: {
          title: '组件示例',
          icon: renderIcon(WalletOutlined),
          sort: 8,
        },
        children: [
          {
            path: 'table',
            name: `${routeName}_table`,
            redirect: '/comp/table/basic',
            component: ParentLayout,
            meta: {
              title: '表格',
            },
            children: [
              {
                path: 'basic',
                name: `${routeName}_table_basic`,
                meta: {
                  title: '基础表格',
                },
                component: () => import('@/views/comp/table/basic.vue'),
              },
              {
                path: 'editCell',
                name: `${routeName}_table_editCell`,
                meta: {
                  title: '单元格编辑',
                },
                component: () => import('@/views/comp/table/editCell.vue'),
              },
              {
                path: 'editRow',
                name: `${routeName}_table_editRow`,
                meta: {
                  title: '整行编辑',
                },
                component: () => import('@/views/comp/table/editRow.vue'),
              },
            ],
          },
          {
            path: 'form',
            name: `${routeName}_form`,
            redirect: '/comp/form/basic',
            component: ParentLayout,
            meta: {
              title: '表单',
            },
            children: [
              {
                path: 'basic',
                name: `${routeName}_form_basic`,
                meta: {
                  title: '基础使用',
                },
                component: () => import('@/views/comp/form/basic.vue'),
              },
              {
                path: 'useForm',
                name: `useForm`,
                meta: {
                  title: 'useForm',
                },
                component: () => import('@/views/comp/form/useForm.vue'),
              },
            ],
          },
          {
            path: 'upload',
            name: `${routeName}_upload`,
            meta: {
              title: '上传图片',
            },
            component: () => import('@/views/comp/upload/index.vue'),
          },
          {
            path: 'modal',
            name: `${routeName}_modal`,
            meta: {
              title: '弹窗扩展',
            },
            component: () => import('@/views/comp/modal/index.vue'),
          },
          {
            path: 'richtext',
            name: `richtext`,
            meta: {
              title: '富文本',
              extra: renderNew(),
            },
            component: () => import('@/views/comp/richtext/vue-quill.vue'),
          },
          {
            path: 'drag',
            name: `Drag`,
            meta: {
              title: '拖拽',
              extra: renderNew(),
            },
            component: () => import('@/views/comp/drag/index.vue'),
          },
        ],
      },
    ],
  },
];

export default routes;
